<template>
	<div class="list bb">
		<ul class="labelbox" >
			<li v-for="(v, i) in FBtype" :key="i" class="labels ilbk cur" :class="{active: choosei === v.fbId}" v-text="v.fbname" :data-i="v.fbId" @click="changeList(v.fbId)"/>
		</ul>
		<ul>
			<li v-for="(v,i) in showList" :key="i" class="coinbox fcb cur animation" @click="e_choseName(v.ftrademappingid)">
				<span class="coins" v-text="v.TransactionName"></span>
				<span class="coins" v-text="v.newPrice"></span>
			</li>
		</ul>
	</div>
</template>

<script>
import {vpost, vlink} from '@api'
import Lang from '../lang'
import {bus} from '../../../../../../main.js'
export default {
	name: 'list',
	data() {
		return {
			Lang,
			choosei: 0, // 选择标签i
			showList: [],
			FBtype: [],
		}
	},
	computed: {
		coinList() {
			return this.$store.state.api_coinList.list
		},
		lang() {
			return this.$store.state.setting.lang
		},
	},
	props: {
		FBtypeid: {
			default: 0,
		},
	},
	mounted() {
		this.getTransactionPair()
		this.timing = setInterval(() => {
			// 获取交易信息
			this.changeList(this.choosei)
		}, 10 * 1000)
	},
	methods: {
		e_choose(event) {
			let t = event.target
			let i = t.dataset.i
			if (i === undefined) {
				return false
			}
			this.choosei = Number(this.FBtype[i].fbId)
			this.changeList(this.FBtype[i].fbId)
		},
		//单击时传值
		e_choseName(ftrademappingid) {
			this.$store.commit('set_trade_ftrademappingid', ftrademappingid)
			bus.$emit('choostBZ', ftrademappingid)
			bus.$emit('refresh', ftrademappingid)
		},

		//获取法币类型（初始化）
		getFrenchCurrency(cb) {
			let forgetdata = {
				cointypeId: null,
			}
			vpost(vlink.bbTrade.getFrenchCurrency).then(re => {
				if (this.FBtypeid == '') {
					forgetdata.cointypeId = re.data.FBList[0].fbId
					this.choosei = re.data.FBList[0].fbId
				} else {
					forgetdata.cointypeId = this.FBtypeid
					this.choosei = this.FBtypeid
				}
				this.FBtype = re.data.FBList
				cb(forgetdata)
			})
		},
		//获取交易对信息（初始化）
		getTransactionPair() {
			this.getFrenchCurrency(forgetdata => {
				vpost(vlink.bbTrade.getTransactionPair, forgetdata).then(re => {
					this.showList = re.data.FBList
					if (this.$store.state.trade.kline === false) {
						this.e_choseName(this.showList[0].ftrademappingid)
					} else {
						bus.$emit('refresh', this.$store.state.trade.ftrademappingid)
						this.$store.commit('set_kline', false)
					}
				})
			})
		},
		//获取交易对信息
		changeList(fid) {
			this.choosei = fid
			let forgetdata = {
				cointypeId: fid,
			}
			vpost(vlink.bbTrade.getTransactionPair, forgetdata).then(re => {
				this.showList = re.data.FBList
			})
		},
	},
	destroyed() {
		clearInterval(this.timing)
		this.timing = null
	},
}
</script>

<style scoped>
.list {
	padding: 10px;
	background-color: var(--bg1);
	font-size: 14px;
}
.labelbox {
	width: 100%;
}
.labels {
	margin-right: 20px;
	border-bottom: 1px solid transparent;
	padding: 10px 0;
	color: var(--clr0);
}
.labels:last-of-type {
	/* float: right; */
	margin: 0;
}
.active {
	color: var(--clr1);
	border-color: var(--clr1);
}
.coinbox {
	width: 100%;
	line-height: 28px;
	color: var(--clr0);
}
.coinbox:hover {
	background-color: #0d0e16;
	color: var(--clr1);
}
</style>
